<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.7.6/css/layui.css">
        <style type="text/css">
            .container{
                width: 420px;
                height: 290px;
                min-height: 290px;  
                max-height: 320px;  
                position: absolute;   
                top: 0;  
                left: 0;  
                bottom: 0;  
                right: 0;  
                margin: auto;  
                padding: 20px;  
                z-index: 130;  
                border-radius: 8px;  
                background-color: #fff;  
                box-shadow: 0 3px 18px rgba(100, 0, 0, .5); 
                font-size: 16px;
            }
            .close{
                background-color: white;
                border: none;
                font-size: 18px;
                margin-left: 410px;
                margin-top: -10px;
            }
 
            .layui-input{
                border-radius: 5px;
                width: 300px;
                height: 40px;
                font-size: 15px;
            }
            .layui-form-item{
                margin-left: -20px;
            }
            #logoid{ 
                margin-top: -16px;
                 padding-left:150px; 
                 padding-bottom: 15px;
            }
            .layui-btn{
                margin-left: -50px;
                border-radius: 5px;
                width: 350px;
                height: 40px;
                font-size: 15px;
            }
            .verity{
                width: 120px;
            }
            .font-set{
                font-size: 13px;
                text-decoration: none; 
                margin-left: 120px;
            }
            a:hover{
             text-decoration: underline; 
            }
 
        </style>
    </head>
    <body>
        <form class="layui-form" action="" method="post">
            <div class="container">
                <!-- <button class="close" title="关闭">X</button> -->
                <div class="layui-form-mid layui-word-aux">
                    This is Login Page! <span style="display: inline-block;margin-left: 80px;">Auth：admin=000000</span>
                </div>
              <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                  <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" value="admin">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">密 &nbsp;&nbsp;码</label>
                <div class="layui-input-inline">
                  <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" value="000000">
                </div>
                <!-- <div class="layui-form-mid layui-word-aux">辅助文字</div> -->
              </div>
               <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-inline">
                  <input type="text" name="captcha" placeholder="请输入验证码" autocomplete="off" class="layui-input verity">
                </div>
                <div class="captcha-img">
                    <img src="get_captcha" onclick="brush_captcha(this)" id="captcha" style="cursor: pointer;">
                </div>
              </div>
                <!-- <div class="layui-form-item">
                    <label class="layui-form-label">记住密码</label>
                    <div class="layui-input-block">
                      <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
                    </div>
              </div> -->
 
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" lay-submit lay-filter="demo1">登陆</button>         
                </div>
              </div>
               <a href="" class="font-set">忘记密码?</a>  <a href="" class="font-set">立即注册</a>
            </div>
        </form>
    </body>
</html>
<script type="text/javascript" src="/static/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.md5.js"></script>
<script type="text/javascript" src="/static/lib/layui-v2.7.6/layui.js"></script>
<script>
layui.use(['form', 'layedit', 'laydate', 'jquery'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
  var $ = layui.$;
  
  //日期
 /* laydate.render({
    elem: '#date'
  });
  laydate.render({
    elem: '#date1'
  });
  
  //创建一个编辑器
  var editIndex = layedit.build('LAY_demo_editor');
 
  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 5){
        return '标题至少得5个字符啊';
      }
    }
    ,pass: [
      /^[\S]{6,12}$/
      ,'密码必须6到12位，且不能出现空格'
    ]
    ,content: function(value){
      layedit.sync(editIndex);
    }
  });
  
  //监听指定开关
  form.on('switch(switchTest)', function(data){
    layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
      offset: '6px'
    });
    layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
  });*/
  
  //监听提交
  form.on('submit(demo1)', function(data){
    console.log(data.field)
    /*layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })*/
    
    /*layer.confirm("确认删除该行数据？",{btn:['确定','取消'],title:'删除确认'},function () {
        var dId = data.dId;
    })*/
    $.ajax({
        url:'login',
        type:'post',
        // contentType:'application/json;charset=UTF-8',
        // data:JSON.stringify(data.field),
        data: {
            "username": data.field.username,
            "password": $.md5(data.field.password),
            "captcha": data.field.captcha,
        },
        dataType:'json',
        success:function (resp) {
          if (resp.code == 1) {
            layer.msg(resp.msg, {icon: 1}, function(){
              window.location.href="/";
            });
          } else {
            layer.msg(resp.msg, { icon: 5 }, function(){
               $("#captcha").click();
            });
          }
        }
    });

    return false;
  });
 
  //表单初始赋值
 /* form.val('example', {
    "username": "贤心" // "name": "value"
    ,"password": "123456"
    ,"interest": 1
    ,"like[write]": true //复选框选中状态
    ,"close": true //开关状态
    ,"sex": "女"
    ,"desc": "我爱 layui"
  })*/
  
  
});
// 刷新验证码
function brush_captcha(obj) {
   console.log(obj)
   obj.src = "get_captcha?" + Math.random();
}
</script>